L20: Creating a Website

Github Websites and Quarto

Bogdan G. Popescu

bogdan.popescu@johncabot.edu

John Cabot University

Intro

Today, we learn how to make a website to showcase everything we have done.

Your website address will be username.github.io.

For this reason, you might want to give a bit of thought to what makes the most sense for a username.

It will be difficult to change the user name and how the website will look, once you have set it up.

Benefits of Having a Website

Having of website is beneficial:

it demonstrates your tech saviness: you are comfortable with the digital space and with technology

you can include your CV and people can see it much quicker

you can show your portfolio (i.e. your project for this course for now)

you can show your creative side by using different themes and fonts

Step 1: Signing Up for Github

We now can create a Github account.

Github is a developer platform that allows developers to create, store, manage and share their code.

With Github, it easy to share code with the world.

It is also easy to have your Quarto website stored

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Selecting the username is crucially important

Step 1: Signing Up for Github

Selecting the username is crucially important

This is the username. This will appear in username.github.io

Step 1: Signing Up for Github

Selecting the username is crucially important

This is the username. This will appear in username.github.io

In this case, it will be bgpopescu2. This will appear in bgpopescu2.github.io

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step 1: Signing Up for Github

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

Step to Create a Website

We now need to add a .nojekyll file to the root of our repository
This tells GitHub Pages not to do additional processing of your published site using Jekyll

Mac

touch .nojekyll

Windows

copy NUL .nojekyll

Step to Create a Website

You should now see your website on of your computer

Step to Create a Website

If you’re not comfortable with where it is, place it somewhere where you feel more confortable with having it

Download GitHub Desktop

Next, go to GitHub Desktop

This will be the (friendly) means of communication between GitHub and your computer

This means that you first make those changes on your computer

You will then upload those changes to GitHub, which hosts your website

Download GitHub Desktop

Download GitHub Desktop and install it on your machine

GitHub Desktop

After you have installed GitHub Desktop, sign in

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

Authorize the app - “GitHub Desktop” to access your GitHub account

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

GitHub Desktop

Making changes

Now that we installed GitHub Desktop, making changes is easy

Let us go back to the original folder and make changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

Making changes

It may take up to 10 minutes to see changes on the actual website

After that time has elapsed, you can check the updated website

Creating additional sections

You can easily create additional sections on your website

Let us create a new qmd file

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

The Portfolio Qmd

Removing Categories

We can easily remove categories by deleting the relevant .qmd file

We then need to to update .yaml file

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Removing Categories

Adding the Portfolio

Let us now get back to the portfolio

Let us update the text

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

Adding the Portfolio

You can create your html files externally (i.e. in other folders)

You can then add them to your folder on your website and link to them

Organizing the Home Page

We will now work on getting a more professional-lokking home page

The following index.qmd will change from:

---
title: "Bogdan G. Popescu"
---

Hi! I am Data Analyst, recent graduate from XX University. I have a passion for public policy and data analytics. With a solid background in R programming, data analysis, visualization, and Geographic Information Systems (GIS), I’m ready to tackle the complex challenges at the intersection of data and public policy. On this website, you’ll find a showcase of my projects, demonstrating my ability to analyze societal issues, visualize data trends, and propose actionable recommendations for policy improvements. Click on relevant categories to see these projects.

You can also check out my CV.

Organizing the Home Page

We will now work on getting a more professional-lokking home page

We change the entire qmd file to:

---
title: "Bogdan G. Popescu"
image: images/popescu_photo.jpg
about:
  template: trestles
  image-width: 5cm
  image-shape: round
  links:
    - icon: twitter
      href: https://twitter.com/BogdanGPopescu1
    - icon: github
      href: https://github.com/bgpopescu
    - icon: linkedin
      href: https://www.linkedin.com/in/bogdanpopescu/
---

Hi! I am Data Analyst, recent graduate from XX University. I have a passion for public policy and data analytics. With a solid background in R programming, data analysis, visualization, and Geographic Information Systems (GIS), I’m ready to tackle the complex challenges at the intersection of data and public policy. On this website, you’ll find a showcase of my projects, demonstrating my ability to analyze societal issues, visualize data trends, and propose actionable recommendations for policy improvements. Click on relevant categories to see these projects.

You can also check out my <a href="/cv/bogdan-popescu-cv.pdf" target="_blank">CV</a>.

Organizing the Home Page

To get this to work, you need to create two folders

images
cv

Organizing the Home Page

Organizing the Home Page

Organizing the Home Page

As you may guess, each one of these folders should have items inside

The images folder should have a picture of you: this is popescu_photo.jpg in my case

Organizing the Home Page

As you may guess, each one of these folders should have items inside

The cv folder should have your cv in pdf: this is bogdan-popescu-cv in my case

Organizing the Home Page

Once you have done so, you should go back to the index and update your relevant links

So update your Twitter, Linkedin, and Github.

Of course, there is not need to have all of them

Organizing the Home Page

Then render the qmd file

Organizing the Home Page

The output will look like below

Organizing the Home Page

You can play around with different templates.

Here I use: template: trestles

---
title: "Bogdan G. Popescu"
image: images/popescu_photo.jpg
about:
  template: trestles
  image-width: 5cm
  image-shape: round
  links:
    - icon: twitter
      href: https://twitter.com/BogdanGPopescu1
    - icon: github
      href: https://github.com/bgpopescu
    - icon: linkedin
      href: https://www.linkedin.com/in/bogdanpopescu/
---

Hi! I am Data Analyst, recent graduate from XX University. I have a passion for public policy and data analytics. With a solid background in R programming, data analysis, visualization, and Geographic Information Systems (GIS), I’m ready to tackle the complex challenges at the intersection of data and public policy. On this website, you’ll find a showcase of my projects, demonstrating my ability to analyze societal issues, visualize data trends, and propose actionable recommendations for policy improvements. Click on relevant categories to see these projects.

You can also check out my <a href="/cv/bogdan-popescu-cv.pdf" target="_blank">CV</a>.

Organizing the Home Page

You can play around with different templates.

Here I use: template: trestles

Other options are:

jolla
solana
marquee
broadside

Go to https://quarto.org/docs/websites/website-about.html to see what they look like

Organizing the Home Page

Let us do one final step and get rid of the bgpopescu2.github.io

We can do this by changing the yaml file

Organizing the Home Page

Let us do one final step and get rid of the bgpopescu2.github.io

We can do this by changing the yaml file

Organizing the Home Page

This is the final version

Organizing the Home Page

This is the final version

Organizing the Home Page

This is the final version

Organizing the Home Page

Rerender also the portfolio.qmd file in order to avoid bgpopescu2.github.io being displayed there

Organizing the Home Page

Rerender also the portfolio.qmd file in order to avoid bgpopescu2.github.io being displayed there

Organizing the Home Page

Rerender also the portfolio.qmd file in order to avoid bgpopescu2.github.io being displayed there

Commiting and Pushing Everything to Github

We are now ready to commit and push everything to Github

If you open GitHub Desktop, it automatically sees all the changes we have made

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Commiting and Pushing Everything to Github

Conclusion

Congratulations!

You have created the skeleton of your first website

There are a variety of templates, changes, edit that you can make.

You can find below some two Youtube Videos that I found helpful in creating this tutorial: